/*
 * @Description: 单品试妆统计
 * @Author: kanglin
 * @Date: 2018-10-29 11:06:25
 * @Copyright: Created by Panxsoft.
 */

<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    .v-com-product-statistic, .card{
        background: #ffffff;
        border-radius:10px;
    }
    .card__title {
        padding-left: 50px;
        height:76px;
        font-size:22px;
        font-weight:600;
        line-height:76px;
        color:rgba(51,51,51,1);
        font-family:Segoe UI;
    }
    .card__title__icon{
        display: inline-block;
        height: 28px;
        width: 28px;
        vertical-align: -.9em;
        &>img{
            width: 100%;
            vertical-align: top;
        }
    }
    .list__item__icon{
        display: inline-block;
        width: 76px;
        height: 76px;
        vertical-align: top;
        &>img{
            width: 100%;
        }
    }
    .list{
        list-style: none;
        display: flex;
        justify-content: space-around;
    }
    .list__item{
        text-align: center;
    }
    .list__item__name{
        height:27px;
        font-size:20px;
        font-weight:600;
        line-height:27px;
        color:rgba(51,51,51,1);
        margin: 12px 0 10px;
    }
    .list__item__percent{
        height:32px;
        font-size:22px;
        font-weight:600;
        line-height:32px;
        color:rgba(51,51,51,1);
    }
    .card__content{
        padding-bottom: 43px;
        padding-top: 6px;
    }
</style>

<template>
	<div class="card v-com-product-statistic">
		<div class="card__title">
			单品试妆统计
		</div>
		<div class="card__content">
			<ul class="list">

				<li
					v-for="(item) in getProducts"
					:title="item.category_name"
					:key="item.category_id"
					class="list__item">
					<div class="list__item__icon">
						<img
							:src="item.icon"
							:alt="item.category_name">
					</div>
					<p class="list__item__name">{{ item.count ? `${item.count}次` : $t('common.unknown') }}</p>
					<p class="list__item__percent">
						占比{{ item.total ? Number((item.count / item.total) * 100).toFixed(2) : 0 }}%
					</p>
				</li>

			</ul>
		</div>
	</div>
</template>

<script>


export default {
	name: 'ProductStatistic',
	props: {
		products: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {


			PRODUCT_MAP: {
				LIPSTICK: {
					id: 5, // 口红
					icon: '//gz.bcebos.com/v1/beauty-mirror/web_admin/admin-home/组 177@2x.png',
				},
				EYE_SHADOW: {
					id: 2, // 眼影
					icon: '//gz.bcebos.com/v1/beauty-mirror/web_admin/admin-home/组 176@2x.png',
				},
				EYEBROW: {
					id: 3, // 眉毛
					icon: '//gz.bcebos.com/v1/beauty-mirror/web_admin/admin-home/组 91@2x.png',
				},
				EYELASH: {
					id: 4, // 睫毛
					icon: '//gz.bcebos.com/v1/beauty-mirror/web_admin/admin-home/组 92@2x.png',
				},
				EYE_LINER: {
					id: 8, // 眼线
					icon: '//gz.bcebos.com/v1/beauty-mirror/web_admin/admin-home/组 93@2x.png',
				},
				CONTACT: {
					id: 7, // 美瞳
					icon: '//gz.bcebos.com/v1/beauty-mirror/web_admin/admin-home/组 95@2x.png',
				},
				BLUSH: {
					id: 1, // 腮红
					icon: '//gz.bcebos.com/v1/beauty-mirror/web_admin/admin-home/组 94@2x.png',
				},
				FOUNDATION: {
					id: 9, // 底妆
					icon: '//gz.bcebos.com/v1/beauty-mirror/web_admin/admin-home/组 109@2x.png',
				},

			},
		};
	},
	computed: {
		getProducts() {
			const products = [];
			this.products.forEach((item) => {
				switch (item.category_id) {
				case this.PRODUCT_MAP.LIPSTICK.id:
					Object.assign(item, { icon: this.PRODUCT_MAP.LIPSTICK.icon });
					products.push(item);
					break;
				case this.PRODUCT_MAP.EYE_SHADOW.id:
					Object.assign(item, { icon: this.PRODUCT_MAP.EYE_SHADOW.icon });
					products.push(item);
					break;
				case this.PRODUCT_MAP.EYEBROW.id:
					Object.assign(item, { icon: this.PRODUCT_MAP.EYEBROW.icon });
					products.push(item);
					break;
				case this.PRODUCT_MAP.EYELASH.id:
					Object.assign(item, { icon: this.PRODUCT_MAP.EYELASH.icon });
					products.push(item);
					break;
				case this.PRODUCT_MAP.EYE_LINER.id:
					Object.assign(item, { icon: this.PRODUCT_MAP.EYE_LINER.icon });
					products.push(item);
					break;
				case this.PRODUCT_MAP.FOUNDATION.id:
					Object.assign(item, { icon: this.PRODUCT_MAP.FOUNDATION.icon });
					products.push(item);
					break;
				case this.PRODUCT_MAP.CONTACT.id:
					Object.assign(item, { icon: this.PRODUCT_MAP.CONTACT.icon });
					products.push(item);
					break;
				case this.PRODUCT_MAP.BLUSH.id:
					Object.assign(item, { icon: this.PRODUCT_MAP.BLUSH.icon });
					products.push(item);
					break;
				default:
					break;
				}
			});
			return products;
		},
	},
	methods: {
		formatData(product) {
			return {
				count: product.count ? `${product.count}次` : 0,
				percent: product.total ? Number((product.count / product.total) * 100).toFixed(2) : 0,
			};
		},
	},
};
</script>
